<template>
  <div>
    <el-row>
      <el-col :span="20">{{ depart.name }}</el-col>
      <el-col :span="4">
        <el-row class="right-box">
          <el-col :span="12">{{ depart.manager }}</el-col>
          <el-col
            :span="12"
          ><el-dropdown>
            <span class="el-dropdown-link">
              操作<i class="el-icon-arrow-down el-icon--right" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                @click.native="addDepart(depart.id)"
              >添加子部门</el-dropdown-item>
              <el-dropdown-item
                v-if="flag"
                @click.native="editDepart(depart)"
              >编辑部门</el-dropdown-item>
              <el-dropdown-item
                v-if="flag"
                @click.native="delDepart(depart.id)"
              >删除部门</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown></el-col>
        </el-row></el-col>
    </el-row>
    <!-- 对话框 -->
    <addDig
      :id="id"
      :manager="manager"
      :dialog-form-visible.sync="dialogFormVisible"
      :depart-item="departItem"
      :is-edit="isEdit"
      @success="$emit('success')"
    />
  </div>
</template>

<script>
import { getDepartManagerAPI, delDepartmentAPI } from '@/api/departments'
import addDig from '@/views/departments/components/dialog.vue'
export default {
  name: 'Depart',
  components: {
    addDig
  },
  props: {
    depart: {
      type: Object,
      default: function() {
        return {}
      }
    },
    flag: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      manager: [],
      id: '',
      isEdit: false,
      departItem: {}
    }
  },
  computed: {},
  created() {},
  methods: {
    addDepart(id) {
      // 点击弹出对话框
      this.isEdit = false
      this.id = id
      this.dialogFormVisible = true
      this.getDepartManager()
      this.departItem = {
        code: '',
        introduce: '',
        manager: '',
        name: '',
        pid: ''
      }
    },
    editDepart(departItem) {
      // 编辑操作
      this.getDepartManager()
      this.isEdit = true
      this.dialogFormVisible = true
      this.departItem = departItem
    },
    delDepart(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await delDepartmentAPI(id)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    async getDepartManager() {
      // 获取负责人
      const res = await getDepartManagerAPI()
      this.manager = res.data
    }
  }
}
</script>
<style lang="scss" scoped>
.right-box {
  .el-col {
    height: 26px;
  }
}
</style>
